Flowting

Float property allows text to float and move an element to one side of the sreen based on its property which could be either:

An illustration of floating elements is here to try out:

===============================================================
Here is the code of the HTML and embedded CSS style sheets:
=========================================================== 
		<html> 

		<head> 

		<title> Floating </title> 
	
			<style type="text/css"> 

				body {font-family: arial, sans-serif;}
				h2	{font-family: arial, sans-serif; text-decoration: underline; margin-top:0px;}
				p	{font-family: calibri; background-color:red;
					font-size: large; margin-bottom: 1em;}		
					.tofloat {background-color: yellow; 
					font-family: calibri; 
					font-size: 3em;
					padding: 0.1em;
					float: right;
					text-align: right;
					width: "30";}
				img	{float:right;
					}
			</style> 

		</head> 

		<body> 
		
			<h2 class="tofloat"> Illustrations of the flowting property in CSS3 </h2> 

			<p> This is an example of how the float property could be used in web development and Cascading style sheets.

			The properties used here include background-color (yellow), font family (calibri), 

			font size (3em), padding (0.5em), float (right), text align (right), and the width (30). 

			</p> 

	
			<p> <img src="..\Pictures/Bear.jpg" alt="Bear" style="width:100px;height:150px;"> 

			This picture is now floated to the right of the screen, and the text is being wrapped up to its side. 

			The picture shows a bear living peacfully in its enviroment and enjoying sitting below a nice and beautiful tree. 
 
			</p> 

		</body> 

		</html>
===================================================================

If the picture is available, the rendered document looks like this:

Try different browser to see the difference.


For more details, please contact me here.
Date of last modification: 2020.